<script lang="ts" setup>
  import { ref } from "vue"
  import gmDrawer from '@/components/Drawer/index.vue'
  import { cloneDeep } from "lodash-es"
    import { saveOrUpdate } from '@/api/admin'
  import { getAdminById } from '@/api/employee'
  import { type FormInstance, type FormRules, ElMessage } from "element-plus"
  import useForm from '@/hooks/useForm'
  import useFile from '@/hooks/useFile'
    import {validateIdcard, validatePhone} from '@/utils/validate'
  import departmentSelect from '@/components/departmentSelect/index.vue'
  import roleSelect from '@/components/RoleSelect/index.vue'
  import AdminSelect from '@/components/AdminSelect/index.vue'

  import { debounce } from '@/utils'
  interface Props {
    id?: number
  }

  const props = withDefaults(defineProps<Props>(), {
    id: 0,
  })

  const form = ref<any>({})
  const formRef = ref<FormInstance>()
  const dialogRef = ref<InstanceType<typeof gmDrawer>>()
  const emit = defineEmits(['cancel','success'])
  const storeList = ref<any>([])

  const rules: FormRules = {
    name: [
      { required: true, message: '请输入姓名', trigger: 'change' },
    ],
    // parentAdminId: [
    //   { required: true, message: '请输入父级', trigger: 'change' },
    // ],
    username: [
      { required: true, message: '请输入手机号/账号', trigger: 'change' },
    ],
    password: !props.id ?[
      { required: true, message: '请输入密码', trigger: 'change' },
    ] : [],
    roleId: [
      { required: true, message: '请选择角色', trigger: 'change' },
    ],
    // idCard: [
    //   { required: true, message: '请选择身份证号码', trigger: 'change' },
    //   { validator: validateIdcard, trigger: 'change' }
    // ],
    departmentIds: [
      { required: true, message: '请选择部门', trigger: 'change' },
    ],
  }

  const { handleSubmit } = useForm({formType: 'dialog', emit:emit})
  const { beforeUpload, uploadUrl } = useFile({maxSize: 10, fileType: 'image'})

  const cancel = ()=>{
    emit('cancel')
  }

  const success =  ()=>{
    const params = {
      ...form.value,
      roleId: form.value.roleId
    }
    handleSubmit(saveOrUpdate, formRef.value, params, dialogRef.value)
  }

  const getData = () => {
    getAdminById({id:props.id}).then((res: any)=>{
      form.value = res

    })
  }


  if(props.id) getData()
</script>

<template>
  <gmDrawer
      :title="!props.id ? '新增员工' : '编辑员工'"
      @close="cancel"
      @comfirm="success"
      ref="dialogRef"
      size="800px"
    >
      <div class="fieldTable">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="top">
          <el-row :gutter="20" class="form-card-main">
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" style="width: 100%" placeholder="请输入用户名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="领导" prop="parentAdminId">
                <AdminSelect v-model="form.parentAdminId" width="100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门" prop="departmentIds">
                <departmentSelect v-model="form.departmentIds" :multiple="true" width="100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号/账号" prop="username">
                <el-input v-model="form.username" style="width: 100%" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" style="width: 100%" placeholder="请输入" type="password"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="角色" prop="roleId">
                <roleSelect v-model="form.roleId" :multiple="false" width="100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号码" prop="idCard">
                <el-input v-model="form.idCard" style="width: 100%" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </gmDrawer>
</template>


<style lang="scss" scoped>

</style>
